<template>
  <view class="h-12 px-4 flex items-center justify-between bg-white" @click="jumpCouponName">
    <view>优惠券名称</view>
    <view class="flex items-center">
      <view class="text-gray-400">选择优惠券名称</view>
      <image class="w-5 h-5 ml-4" src="@/static/image/rt.png"></image>
    </view>
  </view>

  <picker class="mt-6 bg-white px-4" :value="denomIndex" @change="selectDenom" :range="denomination">
    <view class="flex h-12 items-center justify-between">
      <view>优惠券面额</view>
      <view class="flex">
        <view>{{ denomination[denomIndex] }} <text v-if="denomIndex !== ''">乐币</text></view>
        <image class="w-5 h-5 ml-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </picker>

  <view class="px-4 h-10 text-sm text-gray-500 flex items-center">选择使用条件</view>
  <picker class="bg-white px-4" :value="meetIndex" @change="selectMeet" :range="denomination">
    <view class="flex h-12 items-center justify-between">
      <view>满足金额</view>
      <view class="flex">
        <view>{{ denomination[meetIndex] }} <text v-if="meetIndex !== ''">乐币</text></view>
        <image class="w-5 h-5 ml-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </picker>

  <picker class="mt-6 bg-white px-4" :value="validTimdIndex" @change="selectValidTime" range-key="name" :range="expirationTime" >
    <view class="flex h-12 items-center justify-between">
      <view>优惠券有效期</view>
      <view class="flex">
        <view>{{ expirationTime[validTimdIndex].name }} <text v-if="meetIndex !== ''">乐币</text></view>
        <image class="w-5 h-5 ml-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </picker>

  <view class="mt-6 h-12 px-4 flex items-center justify-between bg-white">
    <view>发行数量</view>
    <view class="flex h-full items-center flex-1">
      <input type="text" class="w-full h-full text-right mx-4" placeholder="请输入">张
    </view>
  </view>

  <view class="px-4 mt-4 text-slate-600 text-sm">发行量保存后不能改</view>

  <view class="px-4 mt-8 text-center text-lg text-slate-600">优惠券总金额 (金币)</view>
  <view class="px-4 mt-2 text-center text-4xl text-slate-600">199</view>

  <view class="w-52 h-10 mt-4 flex justify-center text-white items-center m-auto bg-indigo-200 rounded-3xl">发行优惠券</view>

  <view class="mt-4 px-4 text-center text-slate-600 text-xs">超过有效期未被使用，优惠券金币将退回</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const jumpCouponName = () => {
  uni.navigateTo({ url: '/pages/coupon/couponName' })
}

/** 面额Array **/
const denomination = ref([10, 38, 70, 98, 150, 198, 500, 648, 1000, 1268, 3000, 5000, 5688])
const denomIndex = ref('')
const meetIndex = ref('')


const selectDenom = (e) => {
  denomIndex.value = e.detail.value
}

const selectMeet = (e) => {
  meetIndex.value = e.detail.value
}

/** 优惠券有效期 **/
const expirationTime = reactive([{ name: '1小时有效' }, { name: '6小时有效' }, { name: '3天有效' }, { name: '7天有效' }])
const validTimdIndex = ref<string>('')

const selectValidTime = (e) => {
  // console.log('0000===', e)
  validTimdIndex.value =  e.detail.value
}

</script>

<style scoped lang="scss">
page {
  min-height: 100vh;
  background: #f5f5f5;
}
</style>
